/* eslint-disable import/no-unresolved */
/* eslint-disable react/self-closing-comp */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/no-multi-comp */
import React, { Component, cloneElement, createElement } from "react";
import { Checkbox, DatePicker, Form, Info, Input, InputNumber, Radio } from "antd";
import FileUpload from "components/file-upload";
import UnifiedTable from "components/template/widget/unified-table/UnifiedTable";
import UnifiedSelect, {
  formFieldOfProvider,
  formFieldOfCustomer,
} from "components/template/widget/unified-select/UnifiedSelect";
import UnifiedSelectType from 'components/template/widget/unified-select-type/UnifiedSelectType';
import config from "config";

const FormItem = Form.Item;

/**
 * @param {{
 *  color?: string
 *  style?: React.CSSProperties
 *  count?: number
 * }} props
 */
const GiftDeclareBadge = (props) => {
  return (
    <div
      style={{
        display: "inline-block",
        width: 18,
        height: 18,
        borderRadius: "50%",
        lineHeight: "18px",
        textAlign: "center",
        color: props.color || "#333",
        fontSize: 12,
        fontWeight: "bold",
        ...props.style,
      }}
    >
      {props.count}
    </div>
  );
};

/**
 * 一个多用途的标题组件
 * @param {{
 *  type?: "primary" | "second" | "third" | "label"
 *  badge?: number
 *  note?: string
 * }} props
 */
const GiftDeclareTitle = (props) => {
  const { children, type = "primary", badge, note = "", ...otherProps } = props;
  const primaryStyle = {
    height: 42,
    lineHeight: "42px",
    boxSizing: "border-box",
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: "#F8F8F8",
    color: "#666666",
    fontWeight: "bold",
    marginBottom: 20,
  };
  const secondStyle = {
    fontWeight: "bold",
    fontSize: 16,
    paddingTop: 40,
    paddingBottom: 10,
    color: "#1E2126",
  };
  const thirdStyle = {
    fontWeight: "bold",
    fontSize: 14,
    paddingTop: 24,
    paddingBottom: 10,
    color: "#1E2126",
  };
  const labelStyle = {};

  const noteStyle = {};

  let style =
    type === "primary"
      ? primaryStyle
      : type === "third"
      ? thirdStyle
      : type === "label"
      ? labelStyle
      : type === "second"
      ? secondStyle
      : {};

  style = { ...style, ...props.style };

  const WrapperComponent = type === "label" ? "span" : "div";

  return createElement(
    WrapperComponent,
    { ...otherProps, style },
    <span>
      {typeof badge === "number" && type === "third" && (
        <GiftDeclareBadge
          color="#fff"
          style={{
            backgroundColor: "rgba(155,163,187,1)",
            color: "#fff",
            marginRight: 6,
          }}
          count={badge}
        ></GiftDeclareBadge>
      )}
      <span>
        {typeof badge === "number" && type === "second" && `${badge}. `}
        {children}
      </span>
      {note && (
        <span
          style={{
            // color: "#FF6680",
          }}
        >
          （{note}）
        </span>
      )}
    </span>
  );
};

const GiftDeclare = (props) => {
  return (
    <div>
      <GiftDeclareTitle>申报明细</GiftDeclareTitle>
      <div style={{ paddingLeft: 10 }}>
        <GiftDeclareTitle
          type="second"
          note="勾选并完整填写提供方及其所在公司、部门及职务等相关信息"
          badge={1}
          style={{ paddingTop: 0 }}
        >
          礼品/招待提供方信息
        </GiftDeclareTitle>
        <div style={{ paddingLeft: 20 }}>
          <FormItem>
            {props.form.getFieldDecorator("gift-declare.providerType1", {
              rules: [
                {
                  required: true,
                  // message: "请选择礼品/招待提供方信息",
                  validator: (rule, value, cb) => {
                    if(config.appEnv === "dev") {
                    console.log('value', value)
                    }
                    if (!value) {
                      cb(new Error('请选择礼品/招待提供方信息'))
                      return
                    }
                    if (value.length === 0) {
                      cb(new Error('请选择礼品/招待提供方信息'))
                      return
                    }
                    for (const table of value) {
                      if (!table.slot) {
                        return cb(new Error('礼品/招待提供方信息不能为空'));
                      }

                      if (Array.isArray(table.slot)) {
                        if (table.slot.length === 0) {
                          return cb(new Error('礼品/招待提供方信息不能为空'));
                        }
                      }

                      if (table.slotType) {
                        const { slot, slotType } = table;
                        const slotConfig =
                        slotType && slotType === "tableOfPrivider"
                            ? formFieldOfProvider
                            : formFieldOfCustomer;
                        const slotResult = slot.length > 5 ? JSON.parse(slot) : slot
                        console.log(slotResult, slotConfig)
                        for (const slotRecord of slotResult) {
                          for (const columnConfig of slotConfig) {
                            if (typeof slotRecord[columnConfig.columnName] === 'undefined' || slotRecord[columnConfig.columnName] === '') {
                              cb(new Error('礼品/招待提供方信息不能为空'))
                              return
                            }
                          }
                        }
                      } else {
                        const { slot } = table;
                        const slotConfig = formFieldOfProvider;
                        console.log('slot', slot.length)
                        const slotResult = slot.length > 5 ? JSON.parse(slot) : slot
                        console.log(slotResult, slotConfig)
                        for (const slotRecord of slotResult) {
                          for (const columnConfig of slotConfig) {
                            console.log("slotRecord[columnConfig.columnName]", slotRecord[columnConfig.columnName])
                            if (typeof slotRecord[columnConfig.columnName] === 'undefined' || slotRecord[columnConfig.columnName] === '') {
                              cb(new Error('礼品/招待提供方信息不能为空'))
                              return
                            }
                          }
                        }
                      }
                    }
                    cb();
                  },
                },
              ],
            })(
              <UnifiedSelect
                type="checkbox"
                options={[
                  {
                    title: "现有供应商",
                    key: "option1",
                    slotType: "tableOfPrivider",
                  },
                  {
                    title: "在洽谈合作意向的第三方",
                    key: "option2",
                    slotType: "tableOfPrivider",
                  },
                  {
                    title: "政府部门或机构",
                    key: "option3",
                    slotType: "tableOfPrivider",
                  },
                  {
                    title: "顾客",
                    key: "option4",
                    slotType: "tableOfCustomer",
                  },
                  {
                    title: "其他（比如公司内部人员）",
                    key: "option5",
                    slotType: "tableOfPrivider",
                  },
                ]}
              ></UnifiedSelect>
            )}
          </FormItem>
        </div>

        <GiftDeclareTitle badge={2} type="second">
          礼品/招待的具体信息
        </GiftDeclareTitle>
        <GiftDeclareTitle badge={1} type="third" note={"勾选并说明"}>
          礼品/招待类型
        </GiftDeclareTitle>
        <div style={{ paddingLeft: 20 }}>
          <FormItem>
            {props.form.getFieldDecorator("gift-declare.giftType2", {
              rules: [
                {
                  required: true,
                  // message: "请选择礼品/招待类型",
                  validator: (rule, value, cb) => {
                    console.log("value", value)
                    if (!value) {
                      cb(new Error('请选择礼品/招待类型'))
                      return
                    }
                    if (value.length === 0) {
                      cb(new Error('请选择礼品/招待类型'))
                      return
                    }
                    for (const table of value) {
                      if (!table.slot) {
                        cb(new Error('请填写具体说明'))
                        return
                      }
                    }
                    cb();
                  }
                },
              ],
            })(
              <UnifiedSelect
                options={[
                  {
                    key: "option1",
                    title:
                      "现金及现金等价物（如预充值的会员卡、代币卡（实体卡、电子礼券）)",
                    slotType: "input",
                  },
                  { title: "实物", key: "option2", slotType: "input" },
                  {
                    title: "财产性利益（如房屋装修、旅游费用等）",
                    key: "option3",
                    slotType: "input",
                  },
                  { title: "其他", key: "option4", slotType: "input" },
                ]}
              ></UnifiedSelect>
            )}
          </FormItem>
        </div>

        <div
          style={{
            display: "flex",
            whiteSpace: "nowrap",
            alignItems: "flex-start",
            paddingTop: 20,
          }}
        >
          <GiftDeclareTitle badge={2} type="third" style={{ paddingTop: 5, marginRight: 10 }}>
            接收礼品/招待的日期
          </GiftDeclareTitle>
          <FormItem>
            {props.form.getFieldDecorator("gift-declare.giftDate", {
              rules: [
                {
                  required: true,
                  message: "请填写",
                },
              ],
            })(<DatePicker style={{ width: 150 }} />)}
          </FormItem>
        </div>

        <div
          style={{
            display: "flex",
            whiteSpace: "nowrap",
            alignItems: "flex-start",
            paddingTop: 20,
          }}
        >
          <GiftDeclareTitle badge={3} type="third" style={{ paddingTop: 5, marginRight: 10 }}>
            礼品/招待（预估）价值
          </GiftDeclareTitle>
          <FormItem>
            {props.form.getFieldDecorator("gift-declare.giftPrice", {
              rules: [
                {
                  required: true,
                  message: "请填写",
                },
              ],
            })(
              <InputNumber
                // type="number"
                placeholder="请输入"
                style={{ width: 150 }}
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                className="rightInputNumber"
              />
            )}
          </FormItem>
          <span style={{ paddingTop: 5 }}>元</span>
        </div>

        <GiftDeclareTitle badge={4} type="third" note={"勾选并说明"}>
          礼品/招待处理情况
        </GiftDeclareTitle>
        <div style={{ paddingLeft: 20 }}>
          <FormItem>
            {props.form.getFieldDecorator("gift-declare.giftHandleType2_4", {
              rules: [
                {
                  required: true,
                  message: "请选择礼品/招待处理情况",
                },
              ],
            })(
              <UnifiedSelect
                options={[
                  {
                    key: "option1",
                    title: "退回给提供方",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                  {
                    key: "option2",
                    title: "申报人保留",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                  {
                    key: "option3",
                    title: "上交给直线经理",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                  {
                    key: "option4",
                    title: "上交给合规办公室",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                  {
                    key: "option5",
                    title: "捐给麦当劳叔叔之家",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                  {
                    key: "option6",
                    title: "其他",
                    slotType: "attachment",
                    note: "请上传支持性文件或请具体说明",
                    noteStar: true
                  },
                ]}
              ></UnifiedSelect>
            )}
          </FormItem>
        </div>
        <GiftDeclareTitle badge={5} type="third">
          从同一提供方（个人或实体）处接收礼品/招待的描述：
        </GiftDeclareTitle>
        <div
          style={{
            paddingLeft: 20,
            display: "flex",
            flexDirection: "column"
          }}
        >
          <div style={{  display: 'flex', flexStart: 'left' }}>
            <div
              style={{ whiteSpace: "nowrap", margin: "0 10px", paddingTop: 5 }}
            >
              1) 最近12个月内这是第
            </div>
            <FormItem>
              {props.form.getFieldDecorator(
                "gift-declare.singleProviderGiftDescription2_5_1",
                {
                  rules: [
                    {
                      required: true,
                      message: "请输入",
                    },
                  ],
                }
                // fix https://pmo.mcd.com.cn/jira/browse/TES-1662 
              )(<InputNumber precision={0} placeholder="请输入" min="1" />)}
            </FormItem>
            <div
              style={{ whiteSpace: "nowrap", margin: "0 10px", paddingTop: 5 }}
            >
              次
            </div>
          </div>
          <div style={{ width: 20 }}></div>
          <div style={{  display: 'flex', flexStart: 'left' }}>
            <div
              style={{ whiteSpace: "nowrap", margin: "0 10px", paddingTop: 5 }}
            >
              2) 最近12个月礼品/招待金额累计大约为
            </div>
            <FormItem>
              {props.form.getFieldDecorator(
                "gift-declare.singleProviderGiftDescription2_5_2",
                {
                  rules: [
                    {
                      required: true,
                      message: "请输入",
                    },
                  ],
                }
              )(<InputNumber
                placeholder="请输入"
                // type="number"
                min={0}
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                className="rightInputNumber"
              />)}
            </FormItem>
            <div
              style={{ whiteSpace: "nowrap", margin: "0 10px", paddingTop: 5 }}
            >
              元
            </div>
          </div>
        </div>

        <GiftDeclareTitle badge={3} type="second">
          其他
        </GiftDeclareTitle>

        <GiftDeclareTitle badge={1} type="third">
          礼品/招待的接收者和提供礼品/招待的提供方是否为亲属关系
        </GiftDeclareTitle>
        <FormItem>
          {props.form.getFieldDecorator(
            "gift-declare.giftProviderHaveRelatives",
            {
              rules: [
                {
                  required: true,
                  // message: "请选择",
                  validator: (rule, value, cb) => {
                    if (config.appEnv === 'dev') console.log('giftProviderHaveRelatives', value)

                    if (!value || value.length === 0) {
                      return cb(new Error('请选择'))
                    }
                    const key = value[0].key
                    if (!value[0].slot) {
                      if (['option1'].includes(key)) {
                        return cb(new Error('请具体说明'))
                      }
                    }
                    cb()
                  }
                },
              ],
            }
          )(
            <UnifiedSelect
              type="radio"
              options={[
                {
                  title: "是",
                  key: "option1",
                  slotType: "input",
                  note:
                    "请具体说明",
                  noteStar: true,
                  isPlaceHolder: true
                },
                {
                  title: "否",
                  key: "option2",
                },
              ]}
            ></UnifiedSelect>
          )}
        </FormItem>

        <GiftDeclareTitle badge={2} type="third">
          礼品/招待获取的渠道
        </GiftDeclareTitle>
        <FormItem>
          {props.form.getFieldDecorator("gift-declare.giftObtainChannel", {
            rules: [
              {
                required: true,
                // message: "请选择",
                validator: (rule, value, cb) => {
                  if (config.appEnv === 'dev') console.log('giftObtainChannel', value)
                  if (!value || value.length === 0) {
                    return cb(new Error('请选择'))
                  }
                  const key = value[0].key
                  if (!value[0].slot) {
                    if (['option1', 'option4'].includes(key)) {
                      return cb(new Error('请具体说明'))
                    }
                  }
                  cb()
                }
              },
            ],
          })(
            <UnifiedSelect
              type="radio"
              options={[
                {
                  key: "option1",
                  title: "招待/招商会等",
                  slotType: "attachment",
                  note:
                    "如勾选此项，请具体说明是否有邀请函，是否有其他公司人员或公司其他人员参加，并上传支持性文件",
                  noteStar: true
                },
                {
                  key: "option2",
                  title: "邮件/快递",
                },
                {
                  key: "option3",
                  title: "当面交付",
                },
                {
                  key: "option4",
                  title: "其他",
                  slotType: "input",
                  note:
                    "请具体说明",
                  noteStar: true,
                  isPlaceHolder: true
                },
              ]}
            ></UnifiedSelect>
          )}
        </FormItem>

        <GiftDeclareTitle badge={3} type="third">
          礼品/招待提供方或其所在公司目前是否有和公司正在进行的项目
        </GiftDeclareTitle>
        <FormItem>
          {props.form.getFieldDecorator(
            "gift-declare.giftProviderHaveProjects",
            {
              rules: [
                {
                  required: true,
                  // message: "请选择",
                  validator: (rule, value, cb) => {
                    if (config.appEnv === 'dev') console.log('giftProviderHaveProjects', value)
                    if (!value || value.length === 0) {
                      return cb(new Error('请选择'))
                    }
                    const key = value[0].key
                    if (!value[0].slot) {
                      if (['option1', 'option4'].includes(key)) {
                        return cb(new Error('请具体说明'))
                      }
                    }
                    cb()
                  }
                },
              ],
            }
          )(
            <UnifiedSelect
              type="radio"
              options={[
                { key: "option1", title: "有", slotType: "input", note: "请具体说明", noteStar: true, isPlaceHolder: true},
                { key: "option2", title: "没有" },
                { key: "option3", title: "不清楚" },
                { key: "option4", title: "其他", slotType: "input",note: "请具体说明", noteStar: true, isPlaceHolder: true},
              ]}
            ></UnifiedSelect>
          )}
        </FormItem>

        <div style={{ height: 60 }}></div>
      </div>
    </div>
  );
};

GiftDeclare.propTypes = {
  form: React.PropTypes.any,
};

export { GiftDeclare, GiftDeclareTitle };
